<template>
  <view class="imgContainer"
        @touchstart="start"
        @touchend="end">
    <image class="img"
           :src="src"
           mode="widthFix">
    </image>
    <view @tap="downLoad()">
      <image class="download"
             src="../../static/icon/download.png"
             mode="aspectFill">
      </image>
    </view>

    <view class="tip"
          v-if="showTip">
      {{tip}}
    </view>
    <view v-if="showMark"
          class="mark">
      <view class="juxingBox">
        <view class="juxing"></view>
        <view class="juxing"></view>
        <view class="juxing"></view>
        <view class="juxing"></view>
      </view>
      <view>正在保存...</view>

    </view>
  </view>
</template>
<script>
import {
  huihuiList,
  minminList,
  panpanList,
  fengjingList,
  foodList,
  shidaList,
  susheList,
  qiuyanList,
  qiuqiuList,
  jingjingList,
  jiangyingList,
} from "../../static/photoData/photoList";

export default {
  data() {
    return {
      src: "",
      srcList: [],
      name: "",
      nowIndex: "",
      tip: "已经是最后一张",
      showTip: false,
      startData: {
        clientX: 0,
        clientY: 0,
      },
      showMark: false,
    };
  },
  onLoad(option) {
    console.log(option);
    this.name = option.type;
    this.src = option.src;
    console.log("名字", this.name);
    if (this.name == "潘潘") {
      console.log("潘潘");
      this.srcList = panpanList;
    }
    if (this.name == "慧慧") {
      this.srcList = huihuiList;
    }
    if (this.name == "敏敏") {
      this.srcList = minminList;
    }
    if (this.name == "风景") {
      this.srcList = fengjingList;
    }
    if (this.name == "美食") {
      this.srcList = foodList;
    }
    if (this.name == "小窝") {
      this.srcList = susheList;
    }
    if (this.name == "shida") {
      this.srcList = shidaList;
    }
    if (this.name == "秋燕") {
      this.srcList = qiuyanList;
    }
    if (this.name == "秋秋") {
      this.srcList = qiuqiuList;
    }
    if (this.name == "江荧") {
      this.srcList = jiangyingList;
    }
    if (this.name == "静静") {
      this.srcList = jingjingList;
    }
    //当前的index是多少？
    this.nowIndex = Number.parseInt(option.nowIndex);

    console.log("this.nowIndex ", this.nowIndex);
    console.log("this.srcList  ", this.srcList);
  },
  methods: {
    start(e) {
      this.startData.clientX = e.changedTouches[0].clientX;
      this.startData.clientY = e.changedTouches[0].clientY;
    },
    end(e) {
      // console.log(e)
      const subX = e.changedTouches[0].clientX - this.startData.clientX;
      if (subX > 100) {
        console.log("右滑，上一张");
        this.forward();
      } else if (subX < -100) {
        console.log("左滑,下一张");
        this.next();
      } else {
        console.log("无效");
      }
    },
    forward() {
      if (this.nowIndex == 0) {
        this.tip = "已经是第一张";
        this.showTip = true;
        setTimeout(() => {
          this.showTip = false;
        }, 2000);
      } else {
        this.nowIndex = this.nowIndex - 1;
        this.src = this.srcList[this.nowIndex].img_src;
      }
    },
    //下一张
    next() {
      if (this.nowIndex == this.srcList.length - 1) {
        this.tip = "已经是最后一张";
        this.showTip = true;
        setTimeout(() => {
          this.showTip = false;
        }, 2000);
      } else {
        this.nowIndex = this.nowIndex + 1;
        console.log(this.nowIndex);
        console.log("下一章是", this.srcList[this.nowIndex]);
        this.src = this.srcList[this.nowIndex].img_src;
      }
    },

    downLoad() {
      uni.getSetting({
        success: (setting) => {
          if (setting.authSetting["scope.writePhotosAlbum"]) {
            //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum();
          } else {
            uni.authorize({
              //如果没有授权，向用户发起请求
              scope: "scope.writePhotosAlbum",
              success: () => {
                this.saveImageToPhotosAlbum();
              },
              fail: () => {
                uni.showToast({
                  title: "请打开保存相册权限，再点击保存相册分享",
                  icon: "none",
                  duration: 3000,
                });
                setTimeout(() => {
                  uni.openSetting({
                    //调起客户端小程序设置界面,让用户开启访问相册
                    success: (res2) => {
                      // console.log(res2.authSetting)
                    },
                  });
                }, 3000);
              },
            });
          }
        },
      });
    },
    saveImageToPhotosAlbum() {
      console.log("正在保存.....");
      this.showMark = true;
      let that = this;
      uni.downloadFile({
        url: "https://xyh.xiaoyunzhu.xyz/download/?url=" + this.src,
        success: (res) => {
          //   console.log("8888888888888888888888", res);
          if (res.statusCode === 200) {
            console.log(res);
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                console.log("保存成功.....");
                that.showMark = false;
                uni.showToast({
                  title: "保存成功",
                  icon: "none",
                });
              },
              fail: function () {
                console.log("失败");
                that.showMark = false;
                uni.showToast({
                  title: "保存失败，请稍后重试",
                  icon: "none",
                });
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style>
.imgContainer {
  position: relative;
  background: rgb(42, 42, 42);
  flex: 1;
  width: 710upx;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.img {
  width: 710upx;
}
.download {
  width: 80upx;
  height: 80upx;
  position: fixed;
  bottom: 20upx;
  left: 20upx;
  z-index: 10;
}
.tip {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20upx;
  border-radius: 15upx;
  transform: scale(0);
  animation: moveTip 0.7s linear;
  animation-fill-mode: forwards;
  font-size: 24upx;
}
@keyframes moveTip {
  from {
  }
  to {
    transform: scale(1);
  }
}

.mark {
  width: 750upx;
  height: 100vh;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.juxing {
  width: 30upx;
  height: 30upx;
  background-color: rgb(226, 119, 137);
  margin: 10upx;
}

.juxingBox > .juxing:nth-child(1) {
  animation: juxing1 1s ease-in infinite;
}
.juxingBox > .juxing:nth-child(2) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.3s;
}
.juxingBox > .juxing:nth-child(3) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.6s;
}
.juxingBox > .juxing:nth-child(4) {
  animation: juxing1 1s ease-in infinite;
  animation-delay: 0.9s;
}
@keyframes juxing1 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
    background-color: transparent;
  }
}
</style>





    